<!-- 页面外套 -->
<div class="page-wrapper" id="personnel_attendance_month">
    
    <!-- 数据网格 -->
    <div class="datagrid datagrid-striped" id="personnel_attendance_month_datagrid">

        <!-- 工具条组 -->
        <div class="tool-group">
            <div class="tool-search">
                <div class="im-label">
                    <div class="input-group">
                        <select class="form-control" id="personnel_attendance_month_tool_keys">
                            <option value="1">姓名</option>
                            <option value="2">工号</option>
                        </select>
                        <span class="input-group-addon fix-border fix-padding"></span>
                        <input type="text" class="form-control" id="personnel_attendance_month_tool_search">
                    </div>
                </div>
                <label id="personnel_attendance_month_tool_select_group"><!--JS推进--></label>               
                <label>
                    <span>在职状态：</span>
                    <select class="form-control" id="personnel_attendance_month_tool_select3"><!--JS推进--></select>
                </label>
                <label>
                    <span>时间：</span>
                    <input type="text" class="form-control" id="personnel_attendance_month_tool_date1" readonly>
                </label>
                <label><button class="btn btn-primary" id="personnel_attendance_month_search_btn"><i class="icon icon-search"></i> 搜索</button></label>
                <div class="clearfix"></div>
            </div>
            <div class="tool-deal">
                <label><button class="btn btn-primary" id="personnel_attendance_month_export_btn"><i class="icon icon-external-link"></i> 导出</button></label>
                <div class="clearfix"></div>
            </div>
        </div>
        <!-- tool-group -->

        <div class="datagrid-container"></div>
        <ul class="pager btn-mini" data-elements="prev,pages,next"></ul>
    </div>
    <!-- datagrid -->

    <!-- 查看盒子 -->
    <div class="modal modal-for-page fade" aria-hidden="false" id="personnel_attendance_month_show_box">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title"><!-- JS推进 --></h4>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered">
                        <thead>
                            <tr class="hl-default">
                                <th>考勤时间</th>
                                <th>用户打卡时间</th>
                                <th>考勤结果</th>
                                <th>考勤班次</th>
                            </tr>
                        </thead>
                        <tbody><!-- JS推进 --></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- personnel_attendance_month_show_box -->

</div>
<!-- page-wrapper -->

<script>
$(function(){

    //变量声明-----------------------------------------------------------------------------------------------
    var
    personnel_attendance_month                    = $("#personnel_attendance_month"),                     //页面ID
    personnel_attendance_month_datagrid           = $("#personnel_attendance_month_datagrid"),            //数据表格
    //搜索
    personnel_attendance_month_tool_keys          = $("#personnel_attendance_month_tool_keys"),           //搜索类别
    personnel_attendance_month_tool_search        = $("#personnel_attendance_month_tool_search"),         //搜索字段
    personnel_attendance_month_tool_select_group  = $("#personnel_attendance_month_tool_select_group"),   //下拉框组
    personnel_attendance_month_tool_select3       = $("#personnel_attendance_month_tool_select3"),        //下拉选择2
    personnel_attendance_month_tool_date1         = $("#personnel_attendance_month_tool_date1"),          //开始时间
    personnel_attendance_month_search_btn         = $("#personnel_attendance_month_search_btn"),          //搜索按钮
    personnel_attendance_month_export_btn         = $("#personnel_attendance_month_export_btn"),          //导出按钮
    //查看盒子
    personnel_attendance_month_show_box           = $("#personnel_attendance_month_show_box");            //查看盒子

    //接口对象-----------------------------------------------------------------------------------------------
    if( window.STATE == "local" ){

        //本地接口
        var personnel_attendance_month_api = {
            datagrid  : LOCAL + "Test/Personnel/Attendance/month.json",                                    //数据表格
            select    : LOCAL + "Test/test_select.json",                                                   //下拉选择
            month_read: LOCAL + "Test/Personnel/Attendance/month_read.json",                               //数据查看
        }

    } else if ( window.STATE == "route" ){

        //远程接口
        var personnel_attendance_month_api = {
            datagrid  : LOCAL + "Test/Personnel/Attendance/month.json",                                    //数据表格
            select    : LOCAL + "Test/test_select.json",                                                   //下拉选择
            month_read: LOCAL + "Test/Personnel/Attendance/month_read.json",                               //数据查看
        }

    }

    //数据表格-----------------------------------------------------------------------------------------------
    personnel_attendance_month_datagrid.datagrid({
        height      : zui_datagrid_height(personnel_attendance_month_datagrid),
        headerHeight: 60,
        sortable    : false,
        cache       : false,
        showRowIndex: true,
        configs     : {
            R0   : {className:"text-center th-line-height"},
            C1   : {className:"cell-hidden"},
            R0C20: {colspan:10},
            R0C30: {colspan:3 },
        },
        states      : {
            fixedLeftUntil  : 3,
            pager           : {
                page        : 1,
                recPerPage  : window.REC_PER_PAGE,
            }
        },
        dataSource : {
            cols   : [                
                {html:true,width:49, name:"id",         label:"ID"  },
                {html:true,width:80, name:"user",       label:"姓名"},
                {html:true,width:80, name:"number",     label:"工号"},
                {html:true,width:80, name:"depart",     label:"部门"},
                {html:true,width:80, name:"post",       label:"职位"},
                {html:true,width:90, name:"attend_day", label:"应出勤天数"},
                {html:true,width:70, name:"work_day",   label:"出勤天数"},
                {html:true,width:70, name:"rest_day",   label:"休息天数"},
                {html:true,width:110,name:"work_hour",  label:"工作时长(分钟)"},

                {html:true,width:70, name:"late_fre",   label:"迟到次数"},     //10
                {html:true,width:110,name:"late_hour",  label:"迟到时长(分钟)"},
                {html:true,width:70, name:"early_fre",  label:"早退次数"},
                {html:true,width:110,name:"early_hour", label:"早退时长(分钟)"},
                {html:true,width:70, name:"absent_day", label:"旷工天数"},
                {html:true,width:100,name:"absent_late",label:"旷工迟到天数"}, //15
                {html:true,width:100,name:"work1_fre",  label:"上班缺卡次数"},
                {html:true,width:100,name:"work2_fre",  label:"下班缺卡次数"},
                {html:true,width:110,name:"out_hour",   label:"外出时长(分钟)"},
                {html:true,width:70, name:"out_day",    label:"出差天数"},

                {html:true,width:70, name:"asl1",//ask_for_leave
                    label : `
                        <table class='th-table'><tr><td colspan='10'>请假(小时)</td></tr>
                            <tr>
                                <td style="width:62px">年假</td>
                                <td style="width:70px">事假</td>
                                <td style="width:70px">病假</td>
                                <td style="width:70px">调休</td>
                                <td style="width:70px">产假</td>
                                <td style="width:70px">陪产假</td>
                                <td style="width:70px">婚假</td>
                                <td style="width:70px">丧假</td>
                                <td style="width:70px">哺乳假</td>
                                <td>其他</td>
                            </tr>
                        </table>
                    `
                },
                {html:true,width:70,name:"asl2",label:"待合并"},
                {html:true,width:70,name:"asl3",label:"待合并"},
                {html:true,width:70,name:"asl4",label:"待合并"},
                {html:true,width:70,name:"asl5",label:"待合并"},
                {html:true,width:70,name:"asl6",label:"待合并"},
                {html:true,width:70,name:"asl7",label:"待合并"},
                {html:true,width:70,name:"asl8",label:"待合并"},
                {html:true,width:70,name:"asl9",label:"待合并"},
                {html:true,width:70,name:"as10",label:"待合并"},
                {html:true,width:80,name:"add1",
                    label : `
                        <table class='th-table'><tr><td colspan='10'>加班时长-按加班规则计算(小时)</td></tr>
                            <tr>
                                <td style="width:72px">工作日加班</td>
                                <td style="width:80px">休息日加班</td>
                                <td>节假日加班</td>
                            </tr>
                        </table>
                    `
                },
                {html:true,width:80,name:"add2",label:"待合并"},
                {html:true,width:80,name:"add3",label:"待合并"},
                //考勤统计
                {width:185,name:"statistic",label:"01",valueOperator:{getter:function(dataValue){ return dataValue[0];  }}},
                {width:185,name:"statistic",label:"02",valueOperator:{getter:function(dataValue){ return dataValue[1];  }}},
                {width:185,name:"statistic",label:"03",valueOperator:{getter:function(dataValue){ return dataValue[2];  }}},
                {width:185,name:"statistic",label:"04",valueOperator:{getter:function(dataValue){ return dataValue[3];  }}},
                {width:185,name:"statistic",label:"05",valueOperator:{getter:function(dataValue){ return dataValue[4];  }}},
                {width:185,name:"statistic",label:"06",valueOperator:{getter:function(dataValue){ return dataValue[5];  }}},
                {width:185,name:"statistic",label:"07",valueOperator:{getter:function(dataValue){ return dataValue[6];  }}},
                {width:185,name:"statistic",label:"08",valueOperator:{getter:function(dataValue){ return dataValue[7];  }}},
                {width:185,name:"statistic",label:"09",valueOperator:{getter:function(dataValue){ return dataValue[8];  }}},
                {width:185,name:"statistic",label:"10",valueOperator:{getter:function(dataValue){ return dataValue[9];  }}},
                {width:185,name:"statistic",label:"11",valueOperator:{getter:function(dataValue){ return dataValue[10]; }}},
                {width:185,name:"statistic",label:"12",valueOperator:{getter:function(dataValue){ return dataValue[11]; }}},
                {width:185,name:"statistic",label:"13",valueOperator:{getter:function(dataValue){ return dataValue[12]; }}},
                {width:185,name:"statistic",label:"14",valueOperator:{getter:function(dataValue){ return dataValue[13]; }}},
                {width:185,name:"statistic",label:"15",valueOperator:{getter:function(dataValue){ return dataValue[14]; }}},
                {width:185,name:"statistic",label:"16",valueOperator:{getter:function(dataValue){ return dataValue[15]; }}},
                {width:185,name:"statistic",label:"17",valueOperator:{getter:function(dataValue){ return dataValue[16]; }}},
                {width:185,name:"statistic",label:"18",valueOperator:{getter:function(dataValue){ return dataValue[17]; }}},
                {width:185,name:"statistic",label:"19",valueOperator:{getter:function(dataValue){ return dataValue[18]; }}},
                {width:185,name:"statistic",label:"20",valueOperator:{getter:function(dataValue){ return dataValue[19]; }}},
                {width:185,name:"statistic",label:"21",valueOperator:{getter:function(dataValue){ return dataValue[20]; }}},
                {width:185,name:"statistic",label:"22",valueOperator:{getter:function(dataValue){ return dataValue[21]; }}},
                {width:185,name:"statistic",label:"23",valueOperator:{getter:function(dataValue){ return dataValue[22]; }}},
                {width:185,name:"statistic",label:"24",valueOperator:{getter:function(dataValue){ return dataValue[23]; }}},
                {width:185,name:"statistic",label:"25",valueOperator:{getter:function(dataValue){ return dataValue[24]; }}},
                {width:185,name:"statistic",label:"26",valueOperator:{getter:function(dataValue){ return dataValue[25]; }}},
                {width:185,name:"statistic",label:"27",valueOperator:{getter:function(dataValue){ return dataValue[26]; }}},
                {width:185,name:"statistic",label:"28",valueOperator:{getter:function(dataValue){ return dataValue[27]; }}},
                {width:185,name:"statistic",label:"29",valueOperator:{getter:function(dataValue){ return dataValue[28]; }}},
                {width:185,name:"statistic",label:"30",valueOperator:{getter:function(dataValue){ return dataValue[29]; }}},
                {width:185,name:"statistic",label:"31",valueOperator:{getter:function(dataValue){ return dataValue[30]; }}},
            ],
            remote : function(){
                return {
                    url     : personnel_attendance_month_api.datagrid,
                    type    : "POST",
                    dataType: "json",
                }
            }
        },
        valueOperator : {
            string : {
                getter : function(dataValue,cell,dataGrid){
                    var label   = cell.config.label;
                    var limited = [10,12,14,15,16,17];
                    if( cell.colIndex>5 && cell.colIndex<33 ){
                        if( dataValue=="0" ){
                            dataValue=`<span style='color:lightgrey'>${dataValue}</span>`;
                        }
                        if( um_isinarray(limited,cell.colIndex) ){
                            dataValue = `<a rowIndex='${cell.rowIndex}' class='personnel_attendance_month_show_btn' label='${label}'>${dataValue}</a>`;
                        } else {
                            dataValue = dataValue;
                        }
                    }
                    return dataValue;
                }
            }
        }
    });//datagrid()

    //变量声明-----------------------------------------------------------------------------------------------
    var 
    personnel_attendance_month_datagrid_obj    = personnel_attendance_month_datagrid.data("zui.datagrid"),//表格对象
    personnel_attendance_month_show_btn        = ".personnel_attendance_month_show_btn";                  //查看按钮

    //时间组件-----------------------------------------------------------------------------------------------
    personnel_attendance_month_tool_date1.datetimepicker(option_month);

    //下拉选项-----------------------------------------------------------------------------------------------
    common_select_linkage("#personnel_attendance_month_tool_select_group","1");                           //搜索

    //在职状态
    $.ajax({
        url     : personnel_attendance_month_api.select,
        type    : "post",
        dataType: "json",
        data    : {},
        success : function(data){
            if( data.status>0 ){
                var data = data.data;
                var option = "<option value='0'>全部</option>";
                for(var i=0;i<data.length;i++){
                    option += "<option value='"+data[i].id+"'>"+data[i].name+"</option>"
                }
                personnel_attendance_month_tool_select3.html(option);
            }
        }
    });

    //搜索按钮-----------------------------------------------------------------------------------------------
    personnel_attendance_month_search_btn.click(function(){

        //字段整理
        var keyword
        = "?sid="    + personnel_attendance_month_tool_keys.val()
        + "&search=" + personnel_attendance_month_tool_search.val()
        + "&depart=" + personnel_attendance_month_tool_select_group.find(".common_select_depart").val()
        + "&state="  + personnel_attendance_month_tool_select3.val()
        + "&date="   + personnel_attendance_month_tool_date1.val();

        //GET提交
        zui_datagrid_render(personnel_attendance_month_datagrid_obj,personnel_attendance_month_api.datagrid+keyword);

    });

    //导出按钮-----------------------------------------------------------------------------------------------
    personnel_attendance_month_export_btn.click(function(){

        //远程提交
        $.ajax({
            url     : API.test_response,
            type    : "post",
            dataType: "json",
            data    : {
                keys    : personnel_attendance_month_tool_keys.val(),
                search  : personnel_attendance_month_tool_search.val(),
                depart  : personnel_attendance_month_tool_select_group.find(".common_select_depart").val(),
                state   : personnel_attendance_month_tool_select3.val(),
                date    : personnel_attendance_month_tool_date1.val(),
            },
            beforesend : function(){
                um_tip("导出中…");
            },
            success : function(data){
                if( data.status>0 ){
                    window.open(API.test_export);
                } else {
                    um_tip(data.message,"1500","text-danger");
                }
            }
        });

    });

    //查看按钮
    $(document).on("click",personnel_attendance_month_show_btn,function(){ 

        //变量声明
        var data_id = zui_datagrid_get_id($(this).attr("rowIndex"));
        var label   = $(this).attr("label");

        //远程提交
        $.ajax({
            url     : personnel_attendance_month_api.month_read,
            type    : "post",
            dataType: "json",
            data    : { id:data_id },
            success : function(data){

                if( data.status>0 ){
                    
                    //变量声明
                    var data = data.data;
                    var text = `${label} : ${data.name} (${data.date})`;
                    var temp = "";

                    for( var i=0;i<data.list.length;i++ ){
                        temp += `
                        <tr>
                            <td>${data.list[i].attendance}  </td>
                            <td>${data.list[i].punch}       </td>
                            <td>${data.list[i].result}      </td>
                            <td>${data.list[i].shifts}      </td>
                        </tr>
                        `;  
                    }

                    //其他操作
                    personnel_attendance_month_show_box.find(".modal-title").text( text );          //标题填充
                    personnel_attendance_month_show_box.find("tbody").html(temp);                   //模板填充
                    personnel_attendance_month_show_box.modal("show");                              //盒子显示

                } else {
                    um_tip(data.message,"1500","text-danger");
                }
            }
        });

    });

});//预加载结尾
</script>